<template>
	<div class="flex" :id="`upTitles` + index">
		<up-title
			v-for="(item, idx) in list"
			:key="idx"
			:title="item.title"
			:title-t="item.titleT"
			:icon="item.icon"
			:image="item.image"
			:imageDefault="item.imageDefault"
			:icon-color="item.iconColor"
			:disabled="idx !== index"
			class="ml-2 first:ml-0 cursor-pointer"
			@click="onChange(idx)" />
	</div>
</template>

<script lang="ts" setup>
import UpTitle from '../up-title/index.vue'
import { PropType } from 'vue'

type Type = {
	title?: string
	titleT?: string
	image?: string
	imageDefault?: string
	icon?: string
	iconColor?: string
}

defineProps({
	index: {
		type: Number,
		default: 0
	},
	list: {
		type: Array as PropType<Array<Type>>,
		default: () => []
	}
})

const onChange = (index: number) => {
	const ele = document.getElementById('upTitles' + index)
	if (ele) {
		ele.scrollIntoView({
			behavior: 'smooth'
		})
	}
}
</script>
